<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>迷你酥 - 用户首页</title>
    <%@ include file="../site/jspf/head-tag.jspf" %>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/static/talent/css/homepage.css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/static/talent/css/profile.css">
	<link rel="stylesheet" href="<%=request.getContextPath()%>/static/talent/css/hobby.css">
</head>
<body>
    <%@ include file="../site/jspf/user-header.jspf" %>

    <section class="top-search" id="topSearchOriginal">
		<div class="top-search-form clearfix">
			<form method="get" action="/companyl/search/">
				<input id="MSSQType" value="2" type="hidden">
				<input name="stype" id="MSSSType" value="" type="hidden">
				<fieldset>
					<input ka="input-com" type="text" name="q" id="MSSFloor" placeholder="搜一搜" maxlength="30" value="">
					<input ka="input-submit" type="submit" value="搜索">
				</fieldset>
			</form>
			<p>热搜词：
				<a href="/companyl/search/?q=华为">华为</a>
				<a href="/companyl/search/?q=百度">百度</a>
				<a href="/companyl/search/?q=中国移动">中国移动</a>
				<a href="/companyl/search/?q=富士康">富士康</a>
				<a href="/companyl/search/?q=联想">联想</a>
			</p>
		</div>
	</section>
	<div class="container profiles pool clearfix">
		<div class="helpless_label"></div>
		<aside class="profiles_vcard">
			<div class="p_v_icon">
				<img src="http://img.kanzhun.com/images/avatar/9df944f6dc1bfe28ffde148cde348b2a.jpg" id="profilePortrait">
				<i class="male"></i>
				<a href="#" id="profilePortraitBtn">更换头像</a>
			</div>
			<h2 title="${talentPo.nickname}">${talentPo.nickname}</h2>
			<ul class="p_v_info mb10">
				<li></li>
			</ul>
			<p class="p_v_integral">
				<a href="/integralhelp.html" target="_blank" class="links fright f_12">如何赚积分？</a>
				积分：<em id="j-integral-number">45</em>
				<span class="f_14"> 分</span>
			</p>
			<p class="p_v_sign">
				<span class="bt_sign already">今日已签到</span>
				<a href="/exchange.html" class="integral_exchange">积分兑换</a>
			</p>
			<nav class="p_v_nav">
				<p><a href="<%=request.getContextPath()%>/TalentServlet?act=toUserPage">我的主页</a></p>
				<p><a href="<%=request.getContextPath()%>/TalentServlet?act=showAllResumes">我的简历</a></p>
				<p><a href="/usercenter/jobsearcher/">职位订阅</a></p>
				<p><a href="/resume/deliver/">投递的职位</a></p>
				<p><a href="/usercenter/jobcollection/">收藏的职位</a></p>
				<p><a href="/usercenter/followcompany/">关注的公司</a></p>
				<p><a href="/usercenter/content/">发布的内容</a></p>
				<p><a href="/usercenter/message/" class="mynews">我的消息</a></p>
				<dl class="mysets">
					<dt>我的设置<i class="trangle upTranslate"></i></dt>
					<dd>
						<p>
							<a href="<%=request.getContextPath()%>/TalentServlet?act=toAccountSetPage">-&nbsp;&nbsp;账号设置</a>
						</p>
						<p class="current">
							<a href="<%=request.getContextPath()%>/TalentServlet?act=toPersonInfoPage">-&nbsp;&nbsp;个人信息</a>
						</p>
					</dd>
				</dl>
			</nav>
		</aside>
		<section class="profiles_con">
			<h3 class="p_tt">基本信息</h3>
			<p class="line_d"></p>
			<ul class="info_edit">
				<form action="<%=request.getContextPath()%>/TalentServlet?act=saveBaseInfo" method="post" autocomplete="off" data-validator-option="{theme:'yellow_right_effect',stopOnError:true}">
					<li>
						<em><i class="mustfull">*</i> 真实姓名</em>
						<span class="field">
							<input type="text" name="name" id="name" value="${talentPo.name}" data-rule="姓名:required;name"/>
						</span>
					</li>
					<li>
						<em><i class="mustfull">*</i> 手机号码</em>
						<span class="field">
							<input type="text" name="phone" value="${talentPo.phone}" readonly="readonly" />
						</span>
						<em style="width: 150px">请到账号设置处修改</em>
					</li>
					<li>
						<em><i class="mustfull">*</i> 邮箱地址</em>
						<span class="field">
							<input type="text" name="email" value="${talentPo.email}" readonly="readonly"/>
						</span>
						<em style="width: 150px">请到账号设置处修改</em>
					</li>
					<li>
						<em><i class="mustfull">*</i> 年龄</em>
						<span class="field">
							<input type="number" id="age" name="age" value="${talentPo.age}" data-rule="年龄:required;age"/>
						</span>
					</li>
					
					<li>
						<em><i class="mustfull">*</i> 爱好</em>
						<%-- <span class="field">
							<input type="text" name="hobby" value="${talentPo.hobby}" />
						</span>--%>
						<span id="hobbysGroup">
							<script>
								var hobbyStr = '${talentPo.hobby}';
								var hobbyArr = hobbyStr.split("|");
								for(var i = 0; i < hobbyArr.length; i++) {
									document.write("<a href='javascript:;' class='integral_exchange'>" + hobbyArr[i] + "</a>");
									document.write("<input type='hidden' name='hobbys' value='"+ hobbyArr[i] + "'>");
								}
							</script>
						</span>
						<span id="addHobbysBtn" onclick="showAddHobbysWindows(this)" class="tips-manager-btn">
							<span class="manager-btn-icon"></span>
							<span class="manager-btn-text"> 添加 </span>
						</span>
					</li>
					
					<li>
						<em><i class="mustfull">*</i> 性别</em>
						<p class="sex">
							<input type="radio" name="gender" id="boy" value="1" checked=checked />
							<label for="a" class="mr15">男</label>
							<input type="radio" name="gender" id="girl" value="2" />
							<label for="b">女</label>
						</p>
						<script>
							var gender = "${talentPo.gender}";
							if(gender == 1) {
								document.getElementById("boy").checked = true;
							} else if(gender == 2) {
								document.getElementById("girl").checked = true;
							}
						</script>
					</li>
					<li class="pt10">
						<em></em>
						<input type="submit" value="保存" class="btn_grey_s" />
					</li>
				</form>
			</ul>
		</section>

		<div id="hobbysSelectWindows" class="sui-prevent-wheel s-isindex-wrap sui-dialog sui-dialog-minesetting" style="width: 300px; height: auto; top: 120px; left: 50%; margin-left:-155px; display: none;">
			<a href="javascript:;" onclick="closeHobbysWindows()" class="sui-dialog-close">关闭</a>
			<div class="sui-dialog-body">
				<div class="s-minesetting" id="s_mine_manager">
					<div class="s-minesetting-wrap clearfix">
						<%--<div class="s-minesetting-left">
							<h3>我的爱好</h3>
							<div id="myHobbys" class="s-minesetting-content sui-componentWrap">
								<!--<div class="s-mod-item" id="s_mineitem_1" style="left: 0px; top: 0px; position: absolute;">
									<div class="s-mod-icon"></div>
									<div class="s-mod-title">我的导航</div>
								</div>
								<div class="sui-draggsort-collapse" style="height: 38px;"></div>
								<div class="sui-draggsort-holder" style="width: 79px; height: 24px; left: 6px; top: 7px; display: none;"></div>-->
							</div>
						</div>
						 --%>
						<div class="s-minesetting-right">
							<h3>新增爱好</h3>
							<div class="s-minesetting-content sui-componentWrap">
								<div class="sui-draggsort-collapse" style="height: 76px;"></div>
								<div class="sui-draggsort-holder" style="width: 84px; height: 24px; left: 102px; top: 45px; display: none;"></div>
								<div id="s_mineitem_15" style="left: 0px; top: 0px; position: absolute;">
									<input type="text" id="hobby" name="hobby" />
									<div onclick="addHobbys()" class="s-mod-icon"></div>
								</div>
								<%-- <div class="s-mod-item" id="s_mineitem_15" style="left: 0px; top: 0px; position: absolute;">
									<div class="s-mod-icon"></div>
									<div class="s-mod-title">我的视频</div>
								</div>
								<div class="s-mod-item" id="s_mineitem_10" style="left: 96px; top: 0px; position: absolute;">
									<div class="s-mod-icon"></div>
									<div class="s-mod-title">我的彩票</div>
								</div>
								<div class="s-mod-item" id="s_mineitem_12" style="left: 192px; top: 0px; position: absolute; zoom: 1;">
									<div class="s-mod-icon"></div>
									<div class="s-mod-title">我的股票</div>
								</div>--%>
								<div class="s-mod-item" id="s_mineitem_7" style="left: 0px; top: 38px; position: absolute; zoom: 1;">
									<%-- <div class="s-mod-title">确认保存</div>--%>
									<a class="btn_grey_s" href="javascript:;" onclick="addHobbys()" >添加</a>
								</div>
								<%--<div class="s-mod-item" id="s_mineitem_20" style="left: 96px; top: 38px; position: absolute; zoom: 1;">
									<div class="s-mod-icon"></div>
									<div class="s-mod-title">我的小说</div>
								</div>--%>
							</div>
						</div>
					</div>
					<div class="setting-arrow setting-arrow-bottom">
						<em></em>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="<%=request.getContextPath()%>/static/comm/plugin/jquery.min.js"></script>
	<script src="<%=request.getContextPath()%>/static/comm/plugin/nice-validator-1.0.7/dist/jquery.validator.min.js?local=zh-CN"></script>
	<script>
		var items = document.getElementsByClassName("s-mod-item");
		for(var i = 0; i < items.length; i ++) {
			items[i].onmouseover = function() {
				this.className = "s-mod-item mod-hover";
			}
			items[i].onmouseout = function() {
				this.className = "s-mod-item";
			}
		}
		var hobbysSelectWindows = document.getElementById("hobbysSelectWindows");
		function showAddHobbysWindows(obj) {
			obj.className = "tips-manager-btn edting-btn-text";
			hobbysSelectWindows.style.display = "block";
		}
		function closeHobbysWindows() {
			/*var hobbyTitle = document.getElementsByClassName("s-mod-title");			
			var hobbysGroup = document.getElementById("hobbysGroup");			
			for(var i = 0; i < hobbyTitle.length; i++) {
				var a = document.createElement("a");
				a.href = "javascript:;";
				a.className = "integral_exchange";
				a.innerHTML = hobbyTitle[i].innerHTML;
				hobbysGroup.appendChild(a);
				
				var hidden = document.createElement("input");
				hidden.type="hidden";
				hidden.name = "hobbys";
				hidden.value = hobbyTitle[i].innerHTML;
				hobbysGroup.appendChild(hidden);
			}*/
			document.getElementById("addHobbysBtn").className = "tips-manager-btn";
			hobbysSelectWindows.style.display = "none";
		}
		
		function addHobbys() {
			var aaaaa = document.getElementById("hobby").value;
			if (aaaaa.length == 0) { 
				alert('爱好不能为空');
				return;
			}
			var hobbysGroup = document.getElementById("hobbysGroup");
			var hobby = document.getElementById("hobby").value;
			var a = document.createElement("a");
			a.href = "javascript:;";
			a.className = "integral_exchange";
			a.innerHTML = hobby;
			hobbysGroup.appendChild(a);
			
			var hidden = document.createElement("input");
			hidden.type="hidden";
			hidden.name = "hobbys";
			hidden.value = hobby;
			hobbysGroup.appendChild(hidden);
			
		}
		/*
		function addHobbys() {
			var myHobbys = document.getElementById("myHobbys");	
			var items = myHobbys.children;				
			var itemsLen;
			if(!items) {
				itemsLen = 0;
			} else {
				itemsLen = items.length;
			}

			var hobbyWrapper = document.createElement("div");
			hobbyWrapper.className = "s-mod-item";
			hobbyWrapper.style.left =  (itemsLen % 3) * 96 + "px";
			hobbyWrapper.style.top = parseInt(itemsLen / 3) * 38 + "px";
			hobbyWrapper.style.position = "absolute";
			
			var icon = document.createElement("div");
			icon.className = "s-mod-icon";
			
			var title = document.createElement("div");
			title.className = "s-mod-title";
			title.innerHTML = document.getElementById("hobby").value;
			
			hobbyWrapper.appendChild(icon);
			hobbyWrapper.appendChild(title);
			
			myHobbys.appendChild(hobbyWrapper);
			
			hobbyWrapper.onmouseover = function() {
				this.className = "s-mod-item mod-hover";
			}
			hobbyWrapper.onmouseout = function() {
				this.className = "s-mod-item";
			}
		}*/
	</script>
		
	</body>
</html>
